import React, {useState} from "react";
import {Modal} from "antd";

import {defaultPagination} from "@/utils/util";
import {useRequest} from "ahooks";
import {findByOrderConsignerDetailList} from "@/services/ant-design-pro/order";
import ProTable from "@ant-design/pro-table";
import { ProDescriptions } from "@ant-design/pro-descriptions";

interface Props {
  id?:number|undefined,
  row:any|undefined
}

const columns = [ {
  title: "下单人员",
  key: "userName",
  dataIndex: "userName",


},{
  title: "发货人员",
  key: "consignerName",
  dataIndex: "consignerName",


},{
  title: "发货手机",
  key: "phone",
  dataIndex: "phone",


}, {
  title: "订单号",
  key: "sn",
  dataIndex: "sn"
}, {
  title: "第三方订单",
  key: "partySn",
  dataIndex: "partySn"
},  {
  title: "产品总数",
  key: "quantity",
  dataIndex: "quantity",
  search: false,
} , {
  title: "订单时间",
  key: "createDate",
  dataIndex: "createDate",
  valueType: 'dateTime',
  search: false
}, {
  title: "操作人员",
  key: "operatorName",
  dataIndex: "operatorName",
  search: false,

}, {
  title: "地址",
  key: "address",
  dataIndex: "address",
  search: false

}]
//goodsName

const columnsTable = [{
  title: "图片",
  key: "image",
  dataIndex: "image",
  valueType: 'image',
},{
  title: "产品名称",
  key: "goodsName",
  dataIndex: "goodsName",

},
  {
  title: "单价",
  key: "price",
  dataIndex: "price"
},{
  title: "产品总数",
  key: "quantity",
  dataIndex: "quantity"
},{
  title: "订单时间",
  key: "createDate",
  dataIndex: "createDate",
  valueType: 'dateTime',
}]
const CloudOrderShow: React.FC<Props> = (props) => {
  const {id, row} = props;
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    fetchByOrderDetailList(id)
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  //findByOrderDetailList
  const [pagination, setPagination] = useState<API.Pagination> ( defaultPagination () );
  const {
    run: fetchByOrderDetailList,
    refresh,
    data: dataList,
    loading,
  } = useRequest ( findByOrderConsignerDetailList, {
    debounceWait: 100,
    manual: true,
  } );

  return (<>
  <a onClick={showModal}>详细</a>
    <Modal footer={null} width={900} title={row.userName} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
      <ProDescriptions
        dataSource={row}
        columns={columns}
      >
      </ProDescriptions>
      <ProTable
        toolBarRender={false}
pagination={false}
        search={false}
        dataSource={dataList?.data}
        loading={loading}

        cardBordered={true}
        columns={columnsTable}
      ></ProTable>
    </Modal>
  </>)
}

export default CloudOrderShow;


